@charset "utf-8";

@import "common";

.essay_content{
    background-color: #fff;
    padding: r(20px) r(30px) 0;
    .essay_list{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: r(31px);
        .essay_frame{
            height: r(344px);
            width: r(282px);
            background-color: #f6f6f6;
            margin-bottom: r(22px);
            .essay_pic{
                width: 100%;
                height: r(182px);
                overflow: hidden;
                margin-bottom: r(12px);
                img{
                    height: 100%;
                    width: 100%;
                }
            }
            .essay_desc{
                width: 100%;
                height: r(54px);
                font-size: r(22px);
                line-height: r(27px);
                margin: r(15px) 0;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 r(7px);
            }
            .essay_sell{
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                padding: 0 r(7px) r(10px);
                h4{
                    height: r(27px);
                    line-height: r(27px);
                    width: r(88px);
                    display: block;
                    font-weight: normal;
                    font-size: r(18px);
                    border-radius: r(14px);
                    text-align: center;
                    background-color: #b20000;
                    color: #fff;
                }
                span{
                    display: flex;
                    flex-wrap: nowrap;
                    height: r(27px);
                    line-height: r(27px);
                    i{
                        display: block;
                        font-size: r(16px);
                        color: #c5c5c5;
                        margin-left: r(16px);
                        &::before{
                            font-size: r(20px);
                            margin-right: r(7px);
                        }
                    }
                }
            }
            .essay_time{
                display: flex;
                align-items: center;
                padding: 0 r(7px) r(6px);
                .essay_portrait{
                    height: r(35px);
                    width: r(35px);
                    margin-right: r(8px);
                    overflow: hidden;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                p{
                    font-size: r(18px);
                    color: #c5c5c5;
                    margin-right: r(13px);
                }
                span{
                    display: block;
                    font-size: r(18px);
                    color: #c5c5c5;
                }
            }
        }
    }
}

//详情页
.article_details{
    position: fixed;
    top: r(90px);
    left: 0;
    right: 0;
    bottom: r(95px);
    background-color: #efefef;
    z-index: 2;
    transform: translate(100%,100%);
    overflow-y: scroll;
    overflow-x: hidden;
    .details_frame{
        padding: r(42px) r(27px) 0;
        background-color: #fff;
        h1{
            font-size: r(30px);
            font-weight: 500;
            text-align: justify;
            color: #010101;
            margin-bottom: r(15px);
        }
        .details_watch{
          text-align: right;
          font-size: r(19px);
          color: #c5c5c5;
          margin-bottom: r(11px);
          i{
              margin-left: r(45px);
              &::before{
                  margin-right: r(6px);
              }
          }
        }
        .digital_marketing{
            text-align: right;
            font-size: r(22px);
            color: #c5c5c5;
            span{
                color: #b20000;
                margin-left: r(17px);
            }
        }
    }
}

.details_content{
    margin-top: r(11px);
    h5{
        font-size: r(20px);
        text-indent: 2em;
        text-align: justify;
        margin-top: r(21px);
        padding-bottom: r(15px);
    }
    p{
        font-size: r(19px);
        text-indent: 2em;
        text-align: justify;
        color: #8b8b8b;
        margin-top: r(21px);
        padding-bottom: r(15px);
    }
    .t_top{
        margin-top: r(10px);
    }
    div{
        width: 100%;
        height: auto;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
}

.next_previous{
    font-size: r(18px);
    color: #727171;
    height: r(80px);
    line-height: r(80px);
    text-align: center;
    margin: r(20px) 0;
    background-color: #fff;
    span{
        font-size: r(22px);
        font-weight: 600;
    }
}

//下方评论区
.comment_area{
    padding: 0 r(30px);
    background-color: #fff;
    .essay_collect{
        padding: r(40px) 0;
        text-align: center;
        li{
            margin: 0 r(27px);
            width: r(72px);
            display: inline-block;
            i{
                display: block;
                height: r(72px);
                line-height: r(72px);
                width: r(72px);
                margin-bottom: r(8px);
                text-align: center;
                border-radius: 50%;
                font-size: r(32px);
                border: 1px solid #8b8b8b;
                color: #c5c5c5;
            }
            p{
                font-size: r(20px);
                color: #c5c5c5;
            }
        }
    }
}

.text_area{
    width: 100%;
    height: r(193px);
    line-height: r(193px);
    margin-bottom: r(17px);
    text-align: center;
    font-size: r(20px);
    border: 1px solid #c9c9c9;
    color: #8b8b8b;
    span{
        color: #b20000;
        text-decoration: underline;
    }
    
}
.essay_comment{
    width: r(395px);
    height: r(53px);
    margin: 0 auto r(23px);
    line-height: r(53px);
    text-align: center;
    font-size: r(26px);
    background-color: #b20000;
    color: #fff;
}
.comment_quantity{
    height: r(73px);
    padding: r(25px) 0;
    padding-left: r(5px);
    line-height: 23px;
    font-size: r(18px);
    color: #727171;
    span{
        position: relative;
        &::after{
            content: "";
            position: absolute;
            height: r(2px);
            width: r(11px);
            bottom: 0;
            left: 0;
            background-color: #c0c0c0;
        }
    }
}

.comment_list{
    width: 100%;
    padding-left: r(5px);
    border-bottom: 1px solid #e6e6e6;
    .com_li_con{
        border-bottom: 1px dashed #c9c9c9;
        padding-bottom: r(26px);
        &:last-child{
            border: none;
        }
        .user_message{
            margin-bottom: r(12px);
            div{
                display: inline-block;
                height: r(51px);
                width: r(51px);
                vertical-align: middle;
                border-radius: 50%;
                overflow: hidden;
                img{
                    display: block;
                    height: 100%;
                    width: 100%;
                }
            }
            p{
                display: inline-block;
                font-size: r(17px);
                vertical-align: middle;
                max-width: 17%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #444444;
            }
            span{
                display: inline-block;
                vertical-align: middle;
                font-size: r(17px);
                color: #b2b2b2;
            }
        }
        .user_com_con{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0 r(20px);
            p{
                font-size: r(22px);
                width: 70%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                color: #444444;
            }
            span{
                font-size: r(15px);
                color: #b2b2b2;
            }
            
        }
        .reply_touch{
            display: flex;
            flex-direction: row-reverse;
            padding: 0 r(20px);
            margin-top: r(20px);
            margin-bottom: r(5px);
            p{
                font-size: r(19px);
                color: #444444;
                span{
                    display: inline-block;
                    margin-left: r(4px);
                    color: #b6b6b6;
                }
                .trans_roate{
                    transform: rotatez(0deg);
                }
            }
        }
        .reply_content{
            display: none;
            margin: 0 r(20px);
            padding: r(20px) r(10px) r(10px);
            background-color: #fafafa;
            .reply_list{
                li{
                    padding: 0 r(16px) r(13px) 0;
                    margin-bottom: r(27px);
                    border-bottom: 1px dashed #c9c9c9;
                    .user_reply{
                        display: flex;
                        align-items: flex-start;
                        padding-bottom: r(17px);
                        div{
                            min-width: r(41px);
                            width: r(41px);
                            height: r(41px);
                            border-radius: 50%;
                            overflow: hidden;
                            vertical-align: middle;
                            margin-top: r(-10px);
                            margin-right: r(15px);
                            img{
                                display: block;
                                height: 100%;
                                width: 100%;
                            }
                        }
                        span{
                            display: block;
                            min-width: r(40px);
                            font-size: r(16px);
                            color: #444444;
                            max-width: r(100px);
                            margin-right: r(20px);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        p{
                            font-size: r(18px);
                            color: #444444;
                        }
                    }
                    .user_reply_date{
                        font-size: r(15px);
                        color: #b2b2b2;
                        text-align: right;
                    }
                }
            }
            form{
                text-align: right;
                width: 100%;
                height: auto;
                line-height: 0;
                padding: 0 r(10px);
                .text_frame{
                    width: 100%;
                    height: r(72px);
                    border: 1px solid #efefef;
                    padding: r(5px);
                    background-color: #fff;
                    margin-bottom: r(8px);
                    textarea{
                        height: 100%;
                        width: 100%;
                        font-size: r(18px);
                        line-height: r(20px);
                        resize: none;
                        border: none;
                    }
                }
                input{
                    display: inline-block;
                    width: r(175px);
                    height: r(45px);
                    line-height: r(45px);
                    text-align: center;
                    font-size: r(20px);
                    color: #fff;
                    background-color: #b20000;
                }
            }
        }
    }
}
